// 引入react内置的hook
import React, { useState } from 'react'
// useState的作用: 在函数组件中定义状态
export default function App() {
  console.log('app组件更新了')
  // const [状态, 修改状态的方法] = useState(状态的初始值)
  // 类组件中: state = {count: 0,msg: '123'}
  // 当前组件中有几个状态数据,就调用几次useState
  // setCount只能修改count,setMsg只能修改msg
  const [count, setCount] = useState(0)
  // const [msg, setMsg] = useState('123')
  return (
    <div>
      App
      <p>{count}</p>
      <button
        onClick={function () {
          // 作用: 修改count值 参数: 目标值
          setCount(1)
          // 注意:
          // 1. setXXX是异步的修改数据
          // 2. 代用setXXX会让组件更新.更新表现形式是整个组件中的所有代码重新解析一遍
          // 3. useState的初始值只会在第一次调用的时候生效
          // 4. 接收状态数据的常量每一次都会重新创建,不存在修改常量的问题
          // 5. 使用useState定义状态数据,如果发现数据没有变化,则组件不会更新
        }}
      >
        +
      </button>
    </div>
  )
}

// import React, { Component } from 'react'

// export default class App extends Component {
//   state = {
//     count: 0,
//   }
//   render() {
//     console.log('app组件更新了')
//     return (
//       <div>
//         App
//         <p>{this.state.count}</p>
//         <button
//           onClick={() => {
//             this.setState({
//               count: 1,
//             })
//           }}
//         >
//           +
//         </button>
//       </div>
//     )
//   }
// }
